<div class="center-container">
  <ng-container *ngIf="!caTrusted; else trusted">
    <ion-card id="untrusted" class="text-center">
      <ion-icon name="lock-closed-outline" class="wiz-icon"></ion-icon>
      <h1>Trust Your Root CA</h1>
      <p>
        Download and trust your server's Root Certificate Authority to establish
        a secure (HTTPS) connection. You will need to repeat this on every
        device you use to connect to your server.
      </p>
      <ol>
        <li>
          <b>Bookmark this page</b>
          - Save this page so you can access it later. You can also find the
          address in the
          <code>StartOS-info.html</code>
          file downloaded at the end of initial setup.
        </li>
        <li>
          <b>Download your server's Root CA</b>
          - Your server uses its Root CA to generate SSL/TLS certificates for
          itself and installed services. These certificates are then used to
          encrypt network traffic with your client devices.
          <br />
          <ion-button
            strong
            size="small"
            shape="round"
            color="tertiary"
            (click)="download()"
          >
            Download
            <ion-icon slot="end" name="download-outline"></ion-icon>
          </ion-button>
        </li>
        <li>
          <b>Trust your server's Root CA</b>
          - Follow instructions for your OS. By trusting your server's Root CA,
          your device can verify the authenticity of encrypted communications
          with your server.
          <br />
          <ion-button
            strong
            size="small"
            shape="round"
            color="primary"
            href="https://docs.start9.com/0.3.5.x/user-manual/trust-ca"
            target="_blank"
            noreferrer
          >
            View Instructions
            <ion-icon slot="end" name="open-outline"></ion-icon>
          </ion-button>
        </li>
        <li>
          <b>Test</b>
          - Refresh the page. If refreshing the page does not work, you may need
          to quit and re-open your browser, then revisit this page.
          <br />
          <ion-button
            strong
            size="small"
            shape="round"
            class="refresh"
            (click)="refresh()"
          >
            Refresh
            <ion-icon slot="end" name="refresh"></ion-icon>
          </ion-button>
        </li>
      </ol>
      <ion-button fill="clear" (click)="launchHttps()" [disabled]="caTrusted">
        Skip
        <ion-icon slot="end" name="open-outline"></ion-icon>
      </ion-button>
      <span class="skip_detail">(not recommended)</span>
    </ion-card>
  </ng-container>

  <ng-template #trusted>
    <ion-card id="trusted" class="text-center">
      <ion-icon
        name="shield-checkmark-outline"
        class="wiz-icon"
        color="success"
      ></ion-icon>
      <h1>Root CA Trusted!</h1>
      <p>
        You have successfully trusted your server's Root CA and may now log in
        securely.
      </p>
      <ion-button strong (click)="launchHttps()" color="tertiary" shape="round">
        Go to login
        <ion-icon slot="end" name="open-outline"></ion-icon>
      </ion-button>
    </ion-card>
  </ng-template>
</div>

<a
  id="install-cert"
  href="/eos/local.crt"
></a>
